<template>
  <div class="dialog">
    <el-dialog :title="'疾病特征'" :visible.sync="showDialog" width="55%" top="0" :close-on-click-modal="false"
      @close="cancel">
      <el-form ref="ruleForm" label-position="left" :model="formData" :rules="rules" class="el-form">
        <el-form-item label="诊断项名称：" class="w50p" prop="diagnosisItemId">
          <el-select filterable clearable v-model="formData.diagnosisItemId" >
            <el-option v-for="item of FeaturesTypeManageList" :key="item.diagnosisItemId" :label="item.diagnosisItemName"
              :value="item.diagnosisItemId" />
          </el-select>
        </el-form-item>
        <el-form-item label="诊断项症状编号	：" class="w50p" prop="diagnosisItemSymbolNo">
          <el-input v-model="formData.diagnosisItemSymbolNo" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="特征描述：" class="w100p" prop="diagnosisItemSymbolDesc">
          <el-input v-model="formData.diagnosisItemSymbolDesc" clearable type="textarea" :rows="2" placeholder="" />
        </el-form-item>
        <el-form-item label="特征图片：" class="w100p" prop="fileId">
          <div class="" style="display: flex;justify-content: flex-start;">
            <EleUploadImage ref="upload" multiple :responseFn="handleResponse" :on-progress="beforeAvatarUpload"
              :action="baseurl" :headers="headers" :fileSize="5" :size="200" :fileType="['png', 'jpg', 'jpeg']"
              :isShowSuccessTip="false" :beforeRemove="beforeRemove" v-model="images" />
            <!-- <div v-if="isimg">
              <img v-if="formData.fileId" :src="imageData" height="180px;" width="180px" style=" margin:10px;" alt="" />
            </div> -->
          </div>
          <!-- <div>
            <el-buttom></el-buttom>
          </div> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import FeaturesTypeManageApi from "@/api/disease-bank-manage/features-type-manage/index";
import DiseaseFeaturesManageApi from "@/api/disease-bank-manage/disease-features-manage/index";
import EleUploadImage from "vue-ele-upload-image";
import DocumentApi from "@/api/document"
import { blobToBase64 } from "@/utils/convert";

export default {
  name: '',
  components: {
    EleUploadImage,
  },
  props: {
    ifAddEditDialog: {
      type: Boolean,
      default: false
    },
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    },
    thisfileId: { // 当前的FileId
      type: String,
      default: ""
    },
    isimg: { //修改/添加时是否展示图片
      type: Boolean,
      default: false
    },
    imageData: {
      default: false
    }
  },
  data () {
    let checkInt = (rule, value, callback) => {
      if (value) {
        if (Number(value) && value % 1 === 0) {
          callback();
        } else {
          return callback(new Error("请输入整数！"));
        }
      }
    };
    return {
      fileIdList: [],
      formData: {},
      FeaturesTypeManageList: [],
      rules: {
        diagnosisItemSymbolNo: [
          { required: true, message: "请输入", trigger: ["change", "blur"] }
        ],
        diagnosisItemId: [
          { required: true, message: "请选择", trigger: ["change", "blur"] }
        ],
        diagnosisItemSymbolDesc: [
          { required: true, message: "请输入", trigger: ["change", "blur"] }
        ],

      },
      baseurl: this.$baseurl.fileServiceUrl + "base/files/upload",
      headers: {
        token: sessionStorage.getItem("token"),
        homeBaseId: sessionStorage.getItem("homeBaseId"),
        homeBaseType: sessionStorage.getItem("homeBaseType")
      },
      images: [],
      imagesMap: [],
      // fileId: [],
      fileId: null,
      showDialog: this.show,
    };
  },
  computed: {},
  watch: {
    show (v) {
      this.showDialog = v;
    },
    nowChanceStau (v) {
      if (v === 'add') {
        this.formData = {
          staffName: sessionStorage.getItem('staffName'),
        }
      }
      if (v === 'edit') {
        this.formData = this.editObject
        console.log(this.editObject)
        if (this.editObject['fileIdList']) {
          this.queryFileId(this.editObject['fileIdList'].split(','))
        }
      }
    }
  },
  created () {
  },
  mounted () {
    this.queryFeaturesType()
  },
  methods: {
    beforeAvatarUpload (file) {
      // debugger
      // console.log(file)
    },
    // 图片上传
    handleResponse (res, file, fileList) {
      if (res.success) {
        this.fileIdList.push(res.data);
        console.log(this.fileIdList)
        this.$message.success("上传成功");
        return file.url;
      } else if (res.success === false && res.errCode === 200) {
        this.$message.error(res.message);
      } else {
        this.$message.error("上传失败，请稍后再试");
      }
    },
    beforeRemove (file) {
      const index = this.fileIdList.findIndex(val => { return val == this.imagesMap[file] })
      this.fileIdList.splice(index, 1)
    },
    // 投入凭证
    queryFileId (fileIdList) {
      if (fileIdList !== null && fileIdList.length > 0) {
        this.fileIdList = fileIdList
        fileIdList.forEach(async item => {
          await DocumentApi.fileDownload({ fileId: item }).then(res => {
            blobToBase64(res.data).then(res2 => {
              this.images.push(res2)
              this.imagesMap[res2] = item
            })
          })
        })
        this.showPictureDialog = true;
      } else this.fileIdList = []
    },
    async queryFeaturesType () {
      const res = await FeaturesTypeManageApi.queryByCondition({})
      this.FeaturesTypeManageList = res.data
    },
    save (formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          console.log(this.fileIdList)
          if (this.nowChanceStau === "edit") {
            this.formData.fileIdList = this.fileIdList.join(',');
            DiseaseFeaturesManageApi.edit(this.formData).then(res => {
              if (res.success === true) {
                this.$message.success("修改成功！");
                this.close()
              } else {
                this.$message.error(res.message);
              }
            });
          } else if (this.nowChanceStau === "add") {
            this.formData.fileIdList = this.fileIdList.join(',');
            DiseaseFeaturesManageApi.add(this.formData).then(res => {
              if (res.success === true) {
                this.$message.success("添加成功！");
                this.close()
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    close () {
      this.$emit("closeDialog");
    },
    cancel () {
      this.$emit("cancelDialog");
      this.$emit('update:ifAddEditDialog', false)
    }
  }
};
</script>
<style lang="scss" scoped></style>
